<template>
  <a-layout style="min-height: 100vh">
    <a-layout-content style="background-color: #F2F2E6">>
      <v-row style="margin-bottom: 5vh">
<!--            固钉图片-->
            <v-col cols="3">
              <a-affix :offset-top="70" >
                <div>
                  <img src="../../public/images/creative_idea.png" alt="" style="height: 600px"/>
                </div>
              </a-affix>
            </v-col>
            <v-col cols="9" style="margin-left: -5vw">
              <div style="width: 67vw; margin-left: 80px">
<!--                创意名称 收藏-->
                <div style="margin-top: 100px">
                  <v-row>
                    <v-col cols="10">
                      <span style="font-family: 'PingFang SC',sans-serif; font-size: 36px; font-weight: bold; color: #89B8CA;">
                    {{creativity.name}}
                  </span>
                    </v-col>
                    <v-col>
                      <v-row type="flex" justify="end" style="padding-top: 2vh; padding-right: 20px">
                        <v-badge overlap bordered :value="collectionCount !== '' && collectionCount !== 0" :content="collectionCount">
                          <a-tooltip placement="bottom">
                            <template slot="title">
                              <span>{{collectState ? '取消收藏' : '收藏'}}</span>
                            </template>
                            <v-btn elevation="5"
                                   x-large
                                   icon
                                   @click="collectAction"
                                   color="#89B8CA">
                              <v-icon>{{collectState ? 'mdi-star-face' : 'mdi-star-plus-outline'}}</v-icon>
                            </v-btn>
                          </a-tooltip>

                        </v-badge>
                      </v-row>
                    </v-col>
                  </v-row>
                  <br>
<!--                  标签-->
                  <a-tag
                    v-for="(item, index) in features"
                    :key="index"
                    color="#FFFAF4"
                    style="height: 35px;
                      font-size: 15px;
                      padding-top: 6px;
                      margin-right: 2vh;
                      margin-top: 1vh;
                      color: #2C2E2D;
                      font-weight:bold;
                      font-family: '华文楷体',sans-serif">
                    {{ item }}
                  </a-tag>
                  <br>
<!--                  Creator-->
                  <v-banner outlined
                            rounded="xl"
                            single-line
                            style="margin-top: 6vh">
                    <v-row >
<!--                      头像-->
                      <v-col cols="2" style="padding-right: 0;">
                        <a-avatar @click="visitUser(userDTO.id)" style="cursor: pointer" :size="64" :src="userDTO.profilepic" />
                      </v-col>
                      <v-col style="padding-left: 0; margin-left: -40px">
                        <v-row>
                          <span style="font-family: Open-Sans,sans-serif; margin-top: 14px" class="smaller-letter">CREATOR</span>
                        </v-row>
<!--                        昵称-->
                        <v-row>
                          <v-col cols="6" style="padding: 0">
                            <span style="cursor: pointer; font-family: Open-Sans,sans-serif; font-size: 1.25rem; padding: 0 0 10px 0;" @click="visitUser(userDTO.id)">{{userDTO.nickname}}</span>
                          </v-col>
                        </v-row>
                      </v-col>
<!--                      关注按钮-->

                      <v-col>
                        <v-row type="flex" justify="end" style="padding-top: 20px; padding-right: 2vw">
                          <v-btn rounded
                                 large
                                 @click="followAction"
                                 :color="followState ? '#89B8CA' : '#FFFAF4'"
                                 v-if="!isMine">
                            <span style="font-family: '华文楷体',sans-serif; font-size: 18px; font-weight: bold">{{followState ? '已关注' : '关注'}}</span>
                            <v-icon>{{followState ? 'mdi-check-all' : 'mdi-cursor-default-click-outline'}}</v-icon>
                          </v-btn>
                        </v-row>
                      </v-col>
                    </v-row>
                  </v-banner>
                </div>
<!--                间距-->
                <p style="margin-top: 50px;"></p>
<!--                创意介绍-->
                <span style="font-family: '等线',sans-serif; font-size: 15px; line-height: 30px; white-space: pre-line">{{creativity.detail}}</span>
                <p style="margin-top: 50px;"></p>
                <div v-if="creativity.video !== ''">
                  <!--                视频介绍标题-->
                  <span style="font-family: Open-Sans,sans-serif; font-weight: lighter" class="small-letter">VIDEO INTRODUCTION</span>
                  <br>
                  <span style="font-family: '等线',sans-serif;" class="small-text">视频介绍</span>
                  <!--                视频播放-->
                  <vue-core-video-player
                    style="margin-top: 20px; margin-bottom: 20px; z-index: 1"
                    v-if="creativity.video !== undefined"
                    :src="creativity.video"></vue-core-video-player>
                  <!--                视频介绍-->
                  <span style="font-family: '等线',sans-serif; font-size: 15px; line-height: 30px; ">{{creativity.videoInfo}}</span>
                </div>
<!--                间距-->
                <p style="margin-top: 50px;"></p>
<!--                创意历程标题-->
                <span style="font-family: Open-Sans,sans-serif; font-weight: lighter" class="small-letter">THE CREATIVITY JOURNEY</span>
                <br>
                <span style="font-family: '等线',sans-serif;" class="small-text">看看创意是如何形成的吧</span>
<!--                IDEA-->
                <v-row style="margin-top: 2vh; margin-bottom: 3vh">
                  <v-col cols="7">
                    <div>
                      <v-row>
                        <v-col cols="1" style="padding-left: 0">
                          <span class="step-num" >1.</span>
                        </v-col>
                        <v-col style="padding-top: 5vh; padding-left: 2vw">
                          <span style="font-family: '华文楷体',sans-serif; letter-spacing: 4px; font-size: 30px; font-weight: bold; color: #89B8CA">创意想法</span>
                          <p style="margin-top: 3px; font-family: 等线 Light,sans-serif;">所有伟大的发明都是从一个简单的想法开始的。</p>
                          <p style="margin-top: 3vh; font-family: 等线,sans-serif; font-size: 16px">
                            <strong>创意名称：</strong>
                            {{ creativity.name }}
                          </p>
                          <p style="margin-top: 1vh; font-family: 等线,sans-serif; font-size: 16px">
                            <strong>创意分类：</strong>
                            {{ creativity.type }}</p>
                          <p style="margin-top: 1vh; font-family: 等线,sans-serif; font-size: 16px" > <strong>令人眼前一亮的特征：</strong></p>
                          <a-tag
                            v-for="(item, index) in features"
                            :key="index"
                            color="#89B8CA"
                            style="height: 30px; padding-top:5px; font-size: 16px; margin-right: 2vh; margin-bottom: 2vh; color: snow; font-weight:bold; font-family: '华文楷体',sans-serif">
                            {{ item }}
                          </a-tag>
                        </v-col>
                      </v-row>
                    </div>
                  </v-col>

                  <v-col cols="5">
                    <div class="image" style="position: relative; top: 50%; transform: translateY(-50%);">
                      <img src="../../public/images/idea-double.png" alt="" title="" style="width: 100%">
                    </div>
                  </v-col>
                </v-row>
<!--                草图-->
                <v-row style="margin-bottom: 3vh">
                  <v-col>
                    <div>
                      <v-row>
                        <v-col cols="1" style="padding-left: 0">
                          <span class="step-num" >2.</span>
                        </v-col>
                        <v-col style="padding-top: 5vh; padding-left: 2vw">
                          <span style="font-family: '华文楷体',sans-serif; letter-spacing: 4px; font-size: 30px; font-weight: bold; color: #89B8CA">创意草图</span>
                          <p style="margin-top: 1vh; font-family: 等线,sans-serif; white-space: pre-line">{{ creativity.sketchInfo }}</p>
                        </v-col>
                      </v-row>
                    </div>
                  </v-col>
                  <v-col cols="5">
                    <div class="image" style="position: relative; top: 50%; transform: translateY(-50%); text-align: center">
                      <img :src="sketchURL" alt="" title="" style="width: auto; height: auto; max-width: 100% ; max-height: 40vh; ">
                      <div class="red-corner top-left"><img src="../../public/images/green-corner-top-left.png" alt="corner"></div>
                      <div class="red-corner top-right"><img src="../../public/images/green-corner-top-right.png" alt="corner"></div>
                      <div class="red-corner bottom-right"><img src="../../public/images/green-corner-bottom-right.png" alt="corner"></div>
                      <div class="red-corner bottom-left"><img src="../../public/images/green-corner-bottom-left.png" alt="corner"></div>
                    </div>
                  </v-col>

                </v-row>
<!--                渲染图-->
                <v-row style="margin-bottom: 6vh">
                  <v-col>
                    <div>
                      <v-row>
                        <v-col cols="1" style="padding-left: 0">
                          <span class="step-num" >3.</span>
                        </v-col>
                        <v-col style="padding-top: 5vh; padding-left: 2vw">
                          <!--                          <span style="font-family: Open-Sans,sans-serif; letter-spacing: 4px; font-size: 30px; font-weight: lighter"> IDEA</span>-->
                          <!--                          &emsp;-->
                          <span style="font-family: '华文楷体',sans-serif; letter-spacing: 4px; font-size: 30px; font-weight: bold; color: #89B8CA">创意渲染图</span>
                          <p style="margin-top: 1vh; font-family: 等线,sans-serif; white-space: pre-line">{{ creativity.picInfo }}</p>
                        </v-col>
                      </v-row>
                    </div>
                  </v-col>
                  <v-col cols="5">
                    <div class="image" style="position: relative; top: 50%; transform: translateY(-50%); text-align: center">
                      <img :src="pictureURL" alt="" title="" style="width: auto; height: auto; max-width: 100% ; max-height: 40vh;">
                      <div class="red-corner top-left"><img src="../../public/images/green-corner-top-left.png" alt="corner"></div>
                      <div class="red-corner top-right"><img src="../../public/images/green-corner-top-right.png" alt="corner"></div>
                      <div class="red-corner bottom-right"><img src="../../public/images/green-corner-bottom-right.png" alt="corner"></div>
                      <div class="red-corner bottom-left"><img src="../../public/images/green-corner-bottom-left.png" alt="corner"></div>
                    </div>
                  </v-col>

                </v-row>

<!--                实现创意-->
                <div v-if="isMine">
                  <p style="margin-top: 50px"></p>
                  <span style="font-family: Open-Sans,sans-serif; font-weight: lighter" class="small-letter">REALIZE YOUR CREATIVITY</span>
                  <br>
                  <span style="font-family: '等线',sans-serif;" class="small-text">实现你的创意</span>
                  <br><br>
                  <v-row>
                    <span style="font-family: '华文楷体',sans-serif; font-size: 24px; font-weight: bold">发现自己的创意极具价值和潜力？前往&nbsp;</span>
                    <v-btn @click="$router.push('/intelligent_guidance')">
                      <span style="font-family: '华文楷体',sans-serif; font-size: 20px; color: #89B8CA; font-weight: bold">创新引导</span>
                    </v-btn>
                    <span style="font-family: '华文楷体',sans-serif; font-size: 24px; font-weight: bold">&nbsp;实现自己的创意！</span>
                  </v-row>
                  <p style="margin-top: 50px"></p>
                </div>


                <v-row style="font-family: Open-Sans,sans-serif; font-weight: lighter; font-size: 16px">
                  <v-col>
                    <v-row type="flex" justify="end" style="padding-right: 3vw">
                      浏览 {{getDisplayData(view)}}&emsp;&emsp;&emsp;&emsp;
                      CREATED&emsp;AT&emsp;{{creativity.createTime}}
                    </v-row>
                  </v-col>
                </v-row>


<!--                评论区-->

                <v-row style="margin-bottom: 15vh" v-if="true">
                  <v-col>
                    <v-sheet style="background-color: #F2F2E6">
                      <v-container>
                        <span style="font-weight: bold; font-family: 微软雅黑,serif; font-size: 22px">评论</span>
                        <!--                        评论输入框-->
                        <div style="padding-top: 1vh">
                          <a-textarea
                            style="background-color: #F2F2E6; border-color: #2C2E2D"
                            id="comm"
                            v-model="comment_content"
                            placeholder='请发表有价值的评论'
                            :auto-size="{ minRows: 4, maxRows: 6 }"
                            @onchange="word_limit($event)"
                            @onkeydown="word_limit($event)"
                            :onkeyup="word_limit()"
                          />
                          <v-row no-gutters justify-lg="end">
                            <v-col cols="12" lg="9" style="text-align: left">
                              <v-subheader>
                                还可输入&nbsp;&nbsp;<span style="color: #2C2E2D">{{input_length}}</span>&nbsp;&nbsp;个字符
                              </v-subheader>
                            </v-col>
                            <v-col cols="12" lg="1" style="text-align: right">
                              <v-subheader>
                                <v-menu scale offset-y>
                                  <template v-slot:activator="{ on, attrs }">
                                    <v-btn v-bind="attrs" v-on="on" icon @click="picker_selected = 'comm'">
                                      <v-icon>mdi-emoticon</v-icon>
                                    </v-btn>
                                  </template>
                                  <!--                          评论输入框的表情选择器-->
                                  <picker
                                    style="height: 25vh"
                                    :include="['people','Smileys']"
                                    :showSearch="false"
                                    :showPreview="false"
                                    :showCategories="false"
                                    @select="addEmoji"
                                  />
                                </v-menu>
                              </v-subheader>
                            </v-col>
                            <v-col cols="12" lg="2" style="text-align: center">
                              <v-subheader>
                                <v-btn rounded
                                       outlined
                                       color="grey"
                                       width="8vw"
                                       @click="send_comment">
                                  <span style="color: #2C2E2D">发表评论</span>
                                </v-btn>
                              </v-subheader>
                            </v-col>
                          </v-row>
                        </div>
                        <v-list three-line :key="children_show" style="background-color: #F2F2E6">
                          <template v-for="(item, index) in comment_list">
                            <v-divider></v-divider>
                            <v-list-item :key="index">
                              <v-list-item-avatar size="32" @click="visitUser(item.userId)" style="cursor: pointer">
                                <v-img :src="item.profilepic"></v-img>
                              </v-list-item-avatar>
                              <v-list-item-content>
                                <v-list-item-subtitle style="padding-bottom: 1vh">
                                  <v-row no-gutters>
                                    <v-col cols="12" lg="6" style="text-align: left">
                                      <span @click="visitUser(item.userId)" style="cursor: pointer">{{item.nickname}}</span>
                                      &nbsp;&nbsp;&nbsp;&nbsp;<span>{{item.relativeTime}}</span>
                                    </v-col>
                                    <v-col cols="12" lg="4"></v-col>
                                    <!--                                    评论删除按钮-->
                                    <v-col cols="12" lg="1">
                                      <v-dialog
                                        min-width="370"
                                        max-width="400"
                                      >
                                        <template v-slot:activator="{ on, attrs }">
                                          <a type="text" style="color: #2C2E2D"
                                             v-bind="attrs"
                                             v-on="on"
                                             v-if="isMine || item.mine">
                                            <v-icon left size="18px">mdi-delete-empty-outline</v-icon>
                                            <span>删除</span>
                                          </a>
                                        </template>
                                        <template v-slot:default="dialog">
                                          <v-card>
                                            <v-card-title>
                                              删除评论
                                            </v-card-title>
                                            <v-card-text>确认删除“{{item.nickname}}”的评论吗？</v-card-text>
                                            <br><br>
                                            <v-card-actions>
                                              <v-spacer></v-spacer>
                                              <v-btn text @click="dialog.value = false">
                                                取消
                                              </v-btn>
                                              <v-btn text @click="delete_comment(item,dialog)" color="#A94600">
                                                确认
                                              </v-btn>
                                            </v-card-actions>
                                          </v-card>
                                        </template>
                                      </v-dialog>
                                    </v-col>
                                    <!--                                    顶级评论的回复和收起按钮-->
                                    <v-col cols="12" lg="1">
                                      <a type="text" style="color: #2C2E2D" @click="show_reply(item)" v-if="!item.show_input">
                                        <v-icon left size="18px">mdi-comment-outline</v-icon>
                                        <span>回复</span>
                                      </a>
                                      <a type="text" style="color: #2C2E2D" @click="hide_reply(item)" v-else>
                                        <v-icon left size="18px">mdi-comment-outline</v-icon>
                                        <span>收起</span>
                                      </a>
                                    </v-col>
                                  </v-row>
                                </v-list-item-subtitle>
                                <p style="line-height: 20px; white-space: pre-line">{{item.content}}</p>
                                <!--                                顶级评论的回复框-->
                                <div style="padding-top: 1vh" v-if="item.show_input">
                                  <a-textarea
                                    :id="item.id"
                                    v-model="children_comment_content"
                                    style="background-color: #F2F2E6; border-color: #2C2E2D"
                                    placeholder='回复'
                                    :auto-size="{ minRows: 3, maxRows: 5 }"
                                    @onchange="reply_word_limit($event)"
                                    @onkeydown="reply_word_limit($event)"
                                    :onkeyup="reply_word_limit()"
                                  />
                                  <v-row no-gutters justify-lg="end">
                                    <v-col cols="12" lg="9" style="text-align: left">
                                      <v-subheader>
                                        还可输入&nbsp;&nbsp;<span style="color: #2C2E2D">{{reply_length}}</span>&nbsp;&nbsp;个字符
                                      </v-subheader>
                                    </v-col>
                                    <v-col cols="12" lg="1" style="text-align: right">
                                      <v-subheader>
                                        <v-menu scale offset-y>
                                          <template v-slot:activator="{ on, attrs }">
                                            <v-btn v-bind="attrs" v-on="on" icon @click="picker_selected = item.id">
                                              <v-icon>mdi-emoticon</v-icon>
                                            </v-btn>
                                          </template>
                                          <!--                                          顶级评论的回复框的表情选择器-->
                                          <picker
                                            style="height: 25vh"
                                            :include="['people','Smileys']"
                                            :showSearch="false"
                                            :showPreview="false"
                                            :showCategories="false"
                                            @select="addEmoji"
                                          />
                                        </v-menu>
                                      </v-subheader>
                                    </v-col>
                                    <v-col cols="12" lg="2" style="text-align: center">
                                      <v-subheader>
                                        <v-btn rounded outlined color="grey" width="6vw" @click="reply_comment(item.id,item.id)">
                                          <span style="color: #2C2E2D">回复</span>
                                        </v-btn>
                                      </v-subheader>
                                    </v-col>
                                  </v-row>
                                </div>
                                <!--                                子评论列表-->
                                <div v-if="item.children.length!==0">
                                  <el-button
                                    v-if="item.show_children===false"
                                    type="text"
                                    @click="item.show_children=true;children_show += 1"
                                  >
                                    <span style="color: #89B8CA; font-family: 微软雅黑,serif; letter-spacing: 1px">
                                      查看全部{{item.children.length}}条回复
                                    </span>
                                  </el-button>
                                  <v-list v-else style="background-color: #F2F2E6">
                                    <template v-for="(child_item, index) in item.children">
                                      <v-divider></v-divider>
                                      <v-list-item :key="index">
                                        <v-list-item-avatar size="28" @click="visitUser(child_item.userId)" style="cursor: pointer">
                                          <v-img :src="child_item.profilepic"></v-img>
                                        </v-list-item-avatar>
                                        <v-list-item-content>
                                          <v-list-item-subtitle style="padding-bottom: 1vh">
                                            <v-row no-gutters>
                                              <v-col cols="12" lg="6" style="text-align: left">
                                                <span>
                                                  <span @click="visitUser(child_item.userId)" style="cursor: pointer">{{child_item.nickname}}</span>
                                                  <span style="color: #89B8CA">&nbsp;回复&nbsp;</span>
                                                  <span @click="visitUser(child_item.puserId)" style="cursor: pointer">{{child_item.pnickname}}</span>
                                                  &nbsp;&nbsp;&nbsp;&nbsp;{{child_item.relativeTime}}
                                                </span>
                                              </v-col>
                                              <v-col cols="12" lg="4"></v-col>
                                              <v-col cols="12" lg="1">
                                                <v-dialog
                                                  min-width="370"
                                                  max-width="400"
                                                >
                                                  <template v-slot:activator="{ on, attrs }">
                                                    <a type="text" style="color: #2C2E2D"
                                                       v-bind="attrs"
                                                       v-on="on"
                                                       v-if="isMine || child_item.mine">
                                                      <v-icon left size="18px">mdi-delete-empty-outline</v-icon>
                                                      <span>删除</span>
                                                    </a>
                                                  </template>
                                                  <template v-slot:default="dialog">
                                                    <v-card>
                                                      <v-card-title>
                                                        删除评论
                                                      </v-card-title>
                                                      <v-card-text>确认删除“{{child_item.nickname}}”的评论吗？</v-card-text>
                                                      <br><br>
                                                      <v-card-actions>
                                                        <v-spacer></v-spacer>
                                                        <v-btn text @click="dialog.value = false">
                                                          取消
                                                        </v-btn>
                                                        <v-btn text @click="delete_comment(child_item,dialog)" color="#A94600">
                                                          确认
                                                        </v-btn>
                                                      </v-card-actions>
                                                    </v-card>
                                                  </template>
                                                </v-dialog>
                                              </v-col>
                                              <v-col cols="12" lg="1">
                                                <a style="color: #2C2E2D" @click="show_reply(child_item)" v-if="!child_item.show_input">
                                                  <v-icon left size="18px">mdi-comment-outline</v-icon>
                                                  回复
                                                </a>
                                                <a type="text" style="color: #2C2E2D" @click="hide_reply(child_item)" v-else>
                                                  <v-icon left size="18px">mdi-comment-outline</v-icon>
                                                  <span>收起</span>
                                                </a>
                                              </v-col>
                                            </v-row>
                                          </v-list-item-subtitle>
                                          <p style="line-height: 20px; white-space: pre-line">{{child_item.content}}</p>
                                          <!--                                          子评论的回复框-->
                                          <div style="padding-top: 1vh" v-if="child_item.show_input">
                                            <a-textarea
                                              :id="child_item.id"
                                              style="background-color: #F2F2E6; border-color: #2C2E2D"
                                              v-model="children_comment_content"
                                              placeholder='请发表有价值的评论'
                                              :auto-size="{ minRows: 3, maxRows: 5 }"
                                              @onchange="reply_word_limit($event)"
                                              @onkeydown="reply_word_limit($event)"
                                              :onkeyup="reply_word_limit()"
                                            />
                                            <v-row no-gutters justify-lg="end">
                                              <v-col cols="12" lg="9" style="text-align: left">
                                                <v-subheader>
                                                  还可输入&nbsp;&nbsp;<span style="color: #2C2E2D">{{reply_length}}</span>&nbsp;&nbsp;个字符
                                                </v-subheader>
                                              </v-col>
                                              <v-col cols="12" lg="1" style="text-align: right">
                                                <v-subheader>
                                                  <v-menu scale offset-y>
                                                    <template v-slot:activator="{ on, attrs }">
                                                      <v-btn v-bind="attrs" v-on="on" icon @click="picker_selected = child_item.id">
                                                        <v-icon>mdi-emoticon</v-icon>
                                                      </v-btn>
                                                    </template>
                                                    <!--                                                    子评论的回复框的表情选择器-->
                                                    <picker
                                                      style="height: 25vh"
                                                      :include="['people','Smileys']"
                                                      :showSearch="false"
                                                      :showPreview="false"
                                                      :showCategories="false"
                                                      @select="addEmoji"
                                                    />
                                                  </v-menu>
                                                </v-subheader>
                                              </v-col>
                                              <v-col cols="12" lg="2" style="text-align: center">
                                                <v-subheader>
                                                  <v-btn rounded outlined color="grey" width="6vw"
                                                         @click="reply_comment(child_item.id,item.id)">
                                                    <span style="color: #2C2E2D">回复</span>
                                                  </v-btn>
                                                </v-subheader>
                                              </v-col>
                                            </v-row>
                                          </div>
                                        </v-list-item-content>
                                      </v-list-item>
                                    </template>
                                  </v-list>
                                </div>
                              </v-list-item-content>
                            </v-list-item>
                          </template>
                        </v-list>
                        <v-pagination
                          v-if="total!==0&&total!==1"
                          v-model="page"
                          :length="total"
                          @input="change_page(page)"
                          circle
                        ></v-pagination>
                      </v-container>
                    </v-sheet>
                  </v-col>
                </v-row>
              </div>
            </v-col>
          </v-row>
    </a-layout-content>
  </a-layout>
</template>

<script>
  import request from "../utils/request";
  import { Picker } from "emoji-mart-vue"; //引入组件

  export default {
    components: { Picker },
    name: "Creativity_Detail",
    data: () => ({
      creativity: {},
      features: [],
      userDTO: {},
      isMine: false,
      followState: false,
      collectState: false,
      followObj:{},
      sketchURL: '',
      pictureURL: '',
      collectionCount: '',
      view: 0,

      solution_info: {}, //当前解决方案具体信息
      comment_list: [], //评论列表
      comment_content: '', //评论框输入内容——主评论框
      children_comment_content: '', //回复评论框输入内容（所有评论共享）
      input_length: 200, //评论框剩余可输入字数
      reply_length: 200, //回复框剩余可输入字数
      page: 1, //评论当前页数
      total: 0, //评论总页数
      children_show: 0, //控制子评论列表重新渲染的key
      picker_selected: 'comm', //当前选中的表情选择器的id
    }),
    created() {
      if (!this.$route.query.creative)
        this.$router.push('/creative404')
      this.init()
    },

    methods:{
      getDisplayData(data){
        if(data >= 10000) {
          return data = Math.floor(data/10000) + "万+"
        }
        else
          return data
      },
      async get_comment(PageNum) { //获取评论
        await this.checkFollowState()
        request.get("/c-comment/getByCreative",{
          params: {
            PageNum: PageNum,
            PageSize: 5,
            creative_id: this.parseJSONCapture(this.decodeCapture(this.$route.query.creative))
          }
        }).then(res => {
          if (res.code === '200'){
            if (res.data === null){
              this.comment_list = []
              this.total = 0
            }
            else {
              this.comment_list = res.data.list
              this.total = Math.ceil(res.data.originCount / 5)
              for(let comment of this.comment_list) {
                comment.show_input = false
                if(comment.children.length !== 0) {
                  comment.show_children = false
                  for(let c of comment.children) {
                    c.show_input = false
                  }
                }
              }
            this.children_show += 1
            }
          }
        })
      },
      change_page(pageNum) { //评论翻页
        this.get_comment(pageNum)
      },
      word_limit() { //修改评论编辑框事件——统计和限制字数
        this.comment_content = this.comment_content.substring(0, 200)
        this.input_length = 200 - this.comment_content.length
      },
      reply_word_limit() { //修改回复编辑框事件——统计和限制字数
        this.children_comment_content = this.children_comment_content.substring(0, 200)
        this.reply_length = 200 - this.children_comment_content.length
      },
      show_reply(item) { //点击回复按钮事件
        this.children_comment_content='' //清空回复框内容
        for(let comment of this.comment_list) { //遍历所有评论，设置回复框不可见
          comment.show_input = false
          if(comment.children.length !== 0) {
            for(let c of comment.children) {
              c.show_input = false
            }
          }
        }
        this.picker_selected = item.id //设置当前选中的表情选择器的id
        item.show_input = true //设置当前回复框可见
        this.children_show += 1 //重新渲染
      },
      hide_reply(item) { //收起回复框按钮事件
        item.show_input = false //设置当前回复框不可见
        this.children_show += 1 //重新渲染
      },
      send_comment() { //发布评论
        if(this.comment_content.split('\n').join('').split(' ').join('').length === 0) {
          this.sendWarnMessage('请输入评论内容')
        } else {
          let c_comment = {}
          c_comment.userId = -1
          c_comment.creativeId = this.creativity.id
          c_comment.content = this.comment_content
          request.post("/c-comment",c_comment).then(res => {
            if(res.code === '200') {
              this.comment_content = ''
              this.page = 1
              this.get_comment(this.page)
              this.sendSuccessMessage('评论成功')
            } else {
              this.sendWarnMessage('评论失败')
              this.get_comment(this.page)
            }
          })
        }
      },
      reply_comment(pid,originId) { //回复评论
        if(this.children_comment_content.split('\n').join('').split(' ').join('').length === 0) {
          this.sendWarnMessage('请输入评论内容')
        } else {
          let c_comment = {}
          c_comment.userId = -1
          c_comment.creativeId = this.creativity.id
          c_comment.content = this.children_comment_content
          c_comment.pid = pid
          c_comment.originId = originId
          request.post("/c-comment",c_comment).then(res => {
            if(res.code === '200') {
              this.children_comment_content = ''
              this.get_comment(this.page)
              this.sendSuccessMessage('评论成功')
            } else {
              this.sendWarnMessage('评论失败')
              this.get_comment(this.page)
            }
          })
        }
      },
      addEmoji(emotion){ //添加表情
        if(this.input_length < 2) {
          this.$message.warning("超过最大长度，无法插入表情")
        } else {
          let textarea = document.getElementById(this.picker_selected)
          if (window.getSelection) {
            // 非IE浏览器
            textarea.setRangeText(emotion.native);
            // 在未选中文本的情况下，重新设置光标位置
            textarea.selectionStart += emotion.native.length;
            textarea.focus()
            if(this.picker_selected === 'comm') {
              this.comment_content = textarea.value
            } else {
              this.children_comment_content = textarea.value
            }
          } else if (document.selection) {
            // IE浏览器
            this.comment_content.focus();
            let sel = document.selection.createRange();
            sel.text = emotion.native;
          }
        }
      },
      delete_comment(item,dialog) { //删除评论
        request.delete("/c-comment/"+item.id).then(res => {
          if(res.code==='200') {
            this.sendSuccessMessage('删除评论成功')
            this.get_comment(this.page)
          } else {
            this.sendWarnMessage('删除评论失败')
            this.get_comment(this.page)
          }
        })
        dialog.value = false
      },

      init(){
        this.loadCreativity()
        this.checkCollectionState()
        this.get_comment(this.page)
      },
      parseJSONCapture(str) {
        try {return JSON.parse(str);}
        catch (e) {
          this.$router.push('/creative404')
        }
      },
      decodeCapture(str) {
        try {return decodeURIComponent(window.atob(str))}
        catch (e) {
          this.$router.push('/creative404')
        }
      },
      // 加载创意信息
      loadCreativity(){
        if (!this.$route.query.creative)
          this.$router.push('/creative404')
        let creative_id = this.parseJSONCapture(this.decodeCapture(this.$route.query.creative))
        request.get('/creative/' + creative_id).then(res =>{
          if (res.code === '200'){
            this.creativity = res.data
            document.title = res.data.name
            if (res.data.statement !== '已发布')
              this.$router.push('/creative404')
            if (res.data.sketch === '{}')
              this.sketchURL = 'https://mindfall.cn/systemImg/processing.png'
            else
              this.sketchURL = JSON.parse(res.data.sketch).response
            if (res.data.picture === '{}')
              this.pictureURL = 'https://mindfall.cn/systemImg/processing.png'
            else
              this.pictureURL = JSON.parse(res.data.picture).response
          }
          else {
            this.$router.push('/creative404')
          }
        })
      },
      // 加载作者信息
      loadDetails(){
        return request.get('/creative/getDetails', {params:{id: this.parseJSONCapture(this.decodeCapture(this.$route.query.creative))}})
      },
      // 检查是否关注
      async checkFollowState(){
        let result = await this.loadDetails()
        if (result.code === '200'){
          this.isMine = result.data.mine
          this.features = result.data.feature
          this.userDTO = result.data.userDTO
          this.view = result.data.view
          this.collectionCount = result.data.collections
          if(this.collectionCount >= 10000) {
            this.collectionCount = Math.floor(this.collectionCount/10000) + "万+"
          }
          this.userDTO.email = result.data.email
          await request.get('/follow/findFollowee').then(res => {
            if (res.code === '200'){
              let tmp = []
              for (let i = 0; i < res.data.length; i++){
                tmp.push(res.data[i].userDTO.id)
              }
              this.followState = tmp.indexOf(result.data.userDTO.id) !== -1
            }
          })
        }
      },
      // 检查是否收藏
      checkCollectionState(){
        request.get('/c-collection/judge', {
          params: {
            creativeId: this.parseJSONCapture(this.decodeCapture(this.$route.query.creative))
          }
        }).then(res => {
          if (res.code === '200'){
            this.collectState = res.data
          }
        })
      },
      // 关注按钮操作
      followAction(){
        if (this.followState === false)
          this.follow()
        else
          this.cancelFollow()
      },
      // 关注
      follow(){
        this.followObj.userId = -1
        this.followObj.fouserId = this.userDTO.id
        request.post('/follow/insertFollow', this.followObj).then(res => {
          if (res.code === '200'){
            this.sendSuccessMessage('关注成功')
            this.followState = true
          }
          else {
            this.sendWarnMessage(res.msg)
            this.checkFollowState()
          }
        })
      },
      // 取消关注
      cancelFollow(){
        request.delete('/follow/deleteFollow', {
          params:{
            fouserId: this.userDTO.id
          }
        }).then(res => {
          if (res.code === '200'){
            this.sendSuccessMessage('取消关注成功')
            this.followState = false
          }
          else {
            this.sendWarnMessage(res.msg)
            this.checkFollowState()
          }
        })
      },
      // 收藏按钮操作
      collectAction(){
        if (this.collectState === false)
          this.collect()
        else
          this.cancelCollect()
      },
      // 收藏
      collect(){
        request.post('/c-collection', {
          userId: -1,
          creativeId: this.parseJSONCapture(this.decodeCapture(this.$route.query.creative))
        }).then(res => {
          if (res.code === '200'){
            this.sendSuccessMessage('收藏成功')
            this.collectState = true
          }
          else {
            this.sendWarnMessage(res.msg)
            this.checkCollectionState()
          }
        })
      },
      // 取消收藏
      cancelCollect(){
        request.delete('/c-collection', {
          params:{
            creativeId: this.parseJSONCapture(this.decodeCapture(this.$route.query.creative))
          }
        }).then(res => {
          if (res.code === '200'){
            this.sendSuccessMessage('取消收藏成功')
            this.collectState = false
          }
          else {
            this.sendWarnMessage(res.msg)
            this.checkCollectionState()
          }
        })
      },

      visitUser(id){
        let routeUrl = this.$router.resolve({
          path: "/userInfo",
          query:{user: window.btoa(window.encodeURIComponent(id))}
        });
        window.open(routeUrl.href, '_blank');
      },
    }
  }
</script>

<style scoped>
  .smaller-letter {
    font-size: 0.75rem;
    letter-spacing: 4px;
    padding: 0 0 10px 0;
  }
  .small-letter {
    font-size: 0.95rem;
    letter-spacing: 4px;
    padding: 0 0 10px 0;
  }
  .small-text {
    font-size: 2.15rem;
    letter-spacing: 2px;
    padding: 0 0 10px 0;
  }
  .image .red-corner {
    width: 30px;
    height: 30px;
    position: absolute;
  }
  .image .red-corner.top-left {
    left: 0;
    top: 0;
  }
  .image .red-corner.top-right {
    top: 0;
    right: 35px;
  }
  .image .red-corner.bottom-left {
    bottom: 0;
    left: 0;
  }
  .image .red-corner.bottom-right {
    bottom: 0;
    right: 35px;
  }
  .image {
    max-width: 100%;
    position: relative;
    -webkit-box-ordinal-group: 3;
    -ms-flex-order: 2;
    order: 2;
    padding: 5px 40px 5px 5px;
  }
  .image-s {
    width: 100%;
    position: relative;
    -webkit-box-ordinal-group: 3;
    -ms-flex-order: 2;
    order: 2;

  }
  .step-num {
    margin-top: 3vh;
    font-weight: 700;
    float: left;
    font-size: 3.7rem;
    vertical-align: top;
    left: -70px;
    bottom: -21px;
    color: #89B8CA;
    font-style: italic;
  }
  a:hover{
    color: #c1cbd7;
  }
  .emoji-mart[data-v-7bc71df8] {
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    height: 420px;
    color: #ffffff !important;
    border: 1px solid #d9d9d9;
    border-radius: 5px;
    background: #fff;
  }

</style>
